<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OGMS|Open Geographic Modeling Simulatio</title>
    <meta name="keywords" content="OGMS,Open,Geographic，Deployment" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/loginRegister.css">
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/navbar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var storage = window.localStorage;
            var username = storage["username"];
            var password = storage["password"];
            var getisstroename = storage["isstorename"];
            if (username != null && username != "" && username != undefined) {
                $("#uname").val(username);
                $("#upass").val(password);
                $("input[type='checkbox']").eq(0).attr("checked", true);
            } else {
                $("#uname").val("");
                $("#upass").val("");
                $("input[type='checkbox']").eq(0).attr("checked", false);
            }

            $(document).keydown(function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) { // enter 键
                    $("#btnSubmit").click();
                }
            });
        });

        $(document).on('click', '#btnSubmit', function () {
            var username = document.getElementById("uname").value;
            var password = document.getElementById("upass").value;
            var storage = window.localStorage;
            if ($("input[type='checkbox']").is(':checked')) {
                //存储到loaclStage
                storage["username"] = username;
                storage["password"] = password;
                storage["isstorename"] = "yes";
            } else {
                storage["username"] = "";
                storage["password"] = "";
                storage["isstorename"] = "no";
            }
            $.ajax({
                url: "http://localhost:8080/GeoModeling/LoginServlet",
                type: "post",
                async: false,
                data: { "username": username, "password": password },
                success: function (data) {
                    if (data == "1") {
                        console.log(document.referrer);
                        if (document.referrer === "") {
                            window.location.href = "index.html";
                        } else {
                            window.location.href = document.referrer;
                        }
                    } else {
                        alert("用户名或密码错误");
                        return;
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        });
    </script>
</head>

<body>
    <!--start 导航条-->
    <div class="head navbar-static-top">
        <nav class="navbar navbar-default pcnav" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button id="phoneBtn" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand">
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right" id="rightNav">
                        <li class="win_min" style="display: block">
                            <a href="javascript:void(0)">
                                <i class="fa fa-minus"></i>
                            </a>
                        </li>
                        <li class="win_max" style="display: block">
                            <a href="javascript:void(0)">
                                <i class="fa fa-square-o"></i>
                            </a>
                        </li>
                        <li class="win_close" style="display: block">
                            <a href="javascript:void(0)">
                                <i class="fa fa-times"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <!--end 导航条-->

    <div class="main-container">
        <div class="container">
            <div class="form-horizontal form-container">
                <div class="form-title">
                    LOGIN
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-3 form-label" style="padding-right: 20px;">Username</label>
                        <div class="col-sm-8" style="padding-left: 0;">
                            <input id="uname" type="text" class="form-control" placeholder="please enter username" />
                        </div>
                    </div>
                    <div class="form-group normal">
                        <label class="control-label col-sm-3 form-label" style="padding-right: 20px;">Password</label>
                        <div class="col-sm-8" style="padding-left: 0;">
                            <input id="upass" type="password" class="form-control" placeholder="please enter password" />
                        </div>
                    </div>

                    <div class="form-group normal">
                        <div class="col-sm-offset-3 col-sm-8">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">
                                    <i>✓</i>Remember the password</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-1 col-sm-10" style="padding-left: 0;">
                            <button id="btnSubmit" class="btn  btn-block">Login</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>